<template>
    <el-container>
        <el-main>
            <div width="2000px" class="div1" >
                <el-select v-model="ocrType" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-upload
                    :auto-upload="false"
                    :http-request="uploadFile"
                    ref="upload"
                    drag
                    :on-success="fileclear"
                    action="/v1/ocr/get"
                    clearFiles
                    :file-list="fileList"
                    accept=".png,.jpg"
                    style="margin-top:35%;margin-left:2.5%"  
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    
                </el-upload>
                <el-button style="margin-left: 37%;margin-top:20%;" size="small" type="success" :disabled="isclick" :loading="loads"  @click="submitUpload">上传识别</el-button>
    
             <!--    <el-dialog
                title="识别结果"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                    <el-image 
                    style="width: 100px; height: 100px"
                    :src="imgUrl" 
                    :preview-src-list="srcList">
                  </el-image>
                    <pre>{{ word}}</pre>
                </el-dialog>
 -->
            </div>
            <div v-show="dialogVisible" class="word">
                <el-image 
                    style="width: 10%; height: 10%"
                    :src="imgUrl" 
                    :preview-src-list="srcList">
                  </el-image>
                    <pre>{{ word}}</pre>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'; 
import {OcrApi} from '../../api/api'; 
export default {
    name: 'Ocr',
    data() {
        return {
            fileList: [],
            fileData: new FormData(),
            dialogVisible:false,
            word:"",
            loads:false,
            options: [{
                value: "0",
                label: 'Cnocr'
                },{
                value: "1",
                label: 'easyOcr'
                }, {
                value: "2",
                label: 'Cnocr2'
                }, {
                value: "3",
                label: '暂无'
            }],
            ocrType:"0",
            imgUrl:"",
            srcList: []
        }
    },
    methods: {
        uploadFile(f){
            this.fileData.append("file",f.file);
        },
        buildQr: function (f) {
        },
        strTojson(msg) {
            var  tt;
            try {
                tt = JSON.parse(msg);
            } catch(e) {
                console.log("json解析失败",e);
                return JSON.stringify(msg,null,"\t");
            }
            var res = JSON.stringify(tt,null,"\t");
            return res
        },
        submitUpload() {
            var that = this;
            that.loads = true
            that.$refs.upload.submit();
            that.fileData.append("type",that.ocrType);
            axios.post("/v1/ocr/get",that.fileData,{ retryDelay: 8000 }).then(res => {
                let { code, msg, data } = res;
                
                if (data.code == 200){
                    that.$message("上传成功")
                    that.dialogVisible = true
                    that.word = that.strTojson(data);
                    that.imgUrl = data.pic;
                    that.srcList.push(data.pic)
                    that.loads = false
                }else{
                    that.$message.error("app上传失败"+data.data);
                    that.loads = false
                }
                }).catch(function(error) {
                    that.loads = false
                    that.$message.error("数据请求失败");
            });
            that.fileData =  new FormData();
        },
        handleClose() {
            this.$message("title","sdfdsfdd")
            this.dialogVisible = false;
            this.qrimg = "";
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }

      

    }

}
</script>

<style type="text/css">
  .div1{
    margin-left: 30%;
    width: 600px;
    height: auto;
    padding: 10px;
    text-align: center;
    background-color: rgba(31, 147, 255, 0.11);
    margin-top: 2%;
    margin-bottom: 10%;
  }
  .word{
    display: inline-block;
    font-size: 14px;
    color: #303030;
    line-height: 1.6;
    font-family: "微软雅黑";
    width: 1000px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
  .sub_button{
    margin-top: 10%;
  }
    pre{ 
        white-space:pre-wrap; /* css3.0 */ 
        white-space:-moz-pre-wrap; /* Firefox */ 
        white-space:-pre-wrap; /* Opera 4-6 */ 
        white-space:-o-pre-wrap; /* Opera 7 */ 
        word-wrap:break-word; /* Internet Explorer 5.5+ */ 
    } 
</style>
